<template>
  <div :class="className" :style="{ height: height, width: width }">
    <div class="panel monitor">
      <div class="inner">
        <div class="content" :class="[isShow ? 'show' : 'hidden']">
          <div class="head">
            <span class="col">持续报警时间</span>
            <span class="col">站名</span>
            <span class="col">作业单号</span>
            <span class="col">报警内容</span>
            <span class="col">报警级别</span>
          </div>
          <div class="marquee-view">
            <div class="marquee" v-for="(item, index) in realTimeAlarms" :key="index">
              <div class="row">
                <span class="col">{{ item.alarm.happenTime }}</span>
                <span class="col">{{ item.alarm.stationName }}</span>
                <span class="col">{{ item.alarm.workNo }}</span>
                <span class="col">{{ item.alarm.alarmContent }}</span>
                <span class="col">{{ alarmLevel(item.alarm.alarmLevel) }}</span>
                <span class="icon-dot"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import resize from './mixins/resize'
import { getCurAllAlarm } from "@/api/alarmInfo"

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '174px'
    }
  },
  data() {
    return {
      chart: null,
      isActive: true,
      isShow: true,

      require:{
          channels: [],
          component: 'HomePageAlarmList'
      },
      utterance: new SpeechSynthesisUtterance(),
      voiceAlarmTimerId: null,

      speaking: false,

      translateAlarmDict: [
          {src:'车次D', dst:'车次动'},
          {src:'车次G', dst:'车次高'},
          {src:'IX', dst:'九'},
          {src:'VIII', dst:'八'},
          {src:'VII', dst:'七'},
          {src:'VI', dst:'六'},
          {src:'IV', dst:'四'},
          {src:'V', dst:'五'},
          {src:'III', dst:'三'},
          {src:'II', dst:'两'},
          {src:'I', dst:'幺'},
          {src:'DG', dst:'道轨'},
          {src:'G', dst:'轨'},
          {src:'S', dst:'上'},
          {src:'X', dst:'下'},
          {src:'/', dst:'杠'},
          {src:'-', dst:'杠'},
          {src:'_', dst:'杠'},
          {src:'D', dst:'调'}
       ]
    }
  },
  created() {
    this.voiceAlarmTimerId = setInterval(this.alarmVoice, 2000)
  },
  mounted() {
    this.subscribeAlarms()
    this.asyncGetCurAllAlarm()
  },
  beforeDestroy() {
    for(let i = 0;i < this.require.channels.length; i++){
        this.sockets.unsubscribe(this.require.channels[i])
    }
    clearInterval(this.voiceAlarmTimerId)
  },
  computed: {
    alarmLevel() {
      return function(level) {
        if (level == 1) return "一级报警"
        else if (level == 2) return "二级报警"
        else if (level == 3) return "三级报警"
        return level
      }
    },
    realTimeAlarms() {
      return this.$store.getters.realTimeAlarms
    }
  },
  methods: {
    subscribeAlarms() {
      var real_alarm_name = "alarm"
      this.require.channels.push(real_alarm_name)
      this.sockets.subscribe(real_alarm_name, res => {
        this.updateRealAlarm(res.data)
      })
    },
    updateRealAlarm(data) {
      this.addRealTimeAlarms(data)
    },
    addRealTimeAlarms(data) {
      this.$store.dispatch('station/addAlarm', data)
    },
    updateRealTimeAlarmVoiceFlag(data) {
      this.$store.dispatch('station/setAlarmFlag', data)
    },
    async alarmVoice() {
      for (let i = 0; i < this.realTimeAlarms.length; i++) {
        let alarmInfo = this.realTimeAlarms[i]
        if (alarmInfo.flag === false && this.speaking === false) {
          this.speaking = true
          this.updateRealTimeAlarmVoiceFlag(alarmInfo.alarm)
          this.textToSpeech(alarmInfo.alarm.alarmContent)
          break
        }
      }
    },
    textToSpeech(text) {
      text = this.translateAlarm(text)
      console.log('alarmVoice2 text:', text)
      this.utterance.lang='zh-CN'
      this.utterance.text = text
      this.utterance.onend = this.onFinishedPlaying
      window.speechSynthesis.speak(this.utterance)
    },
    translateAlarm(data) {
      for (let i = 0; i < this.translateAlarmDict.length; i++) {
        data = data.replaceAll(this.translateAlarmDict[i].src, this.translateAlarmDict[i].dst)
      }
      return data
    },
    onFinishedPlaying() {
      this.speaking = false
    },
    async asyncGetCurAllAlarm() {
      const res = await getCurAllAlarm()
      if (res.code === 0 && res.data) {
        Object.keys(res.data).forEach(key => {
          this.addRealTimeAlarms(res.data[key])
        })
      } 
    }
  }
}
</script>

<style lang="scss" scoped>
.monitor {
  // height: 480px;
  height: 100%;
}
.monitor .inner {
  padding: 0px 0;
  display: flex;
  flex-direction: column;
}
.monitor .tabs {
  padding: 0 36px;
  margin-bottom: 4px;
  display: flex;
}
.monitor .tabs a {
  color: #12e0e3;
  font-size: 12px;
  padding: 0 27px;
}
.monitor .tabs a:first-child {
  padding-left: 0;
  border-right: 2px solid #00f25d;
}
.monitor .tabs a.active {
  color: yellow;
  // background-color: aliceblue;
  display: block;
}
.monitor .content {
  flex: 1;
  position: relative;
  display: none;
}

.monitor .show {
  display: block;
}
.monitor .hidden {
  display: none;
}

.monitor .head {
  display: flex;
  justify-content: space-between;
  line-height: 1.5;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 12px 36px;
  color: #68d8fe;
  font-size: 14px;
}
.monitor .marquee-view {
  // position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  height: 310px;
}

.monitor .row {
  display: flex;
  justify-content: space-between;
  line-height: 1.05;
  font-size: 12px;
  color: #61a8ff;
  padding: 12px 36px;
}
.monitor .row .icon-dot {
  position: absolute;
  left: 16px;
  opacity: 0;
}
.monitor .row:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #68d8fe;
}
.monitor .row:hover .icon-dot {
  opacity: 1;
}
.monitor .col:first-child {
  width: 120px;
  text-align: center;
}
.monitor .col:nth-child(2) {
  width: 80px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
}
.monitor .col:nth-child(3) {
  width: 60px;
  text-align: center;
}

.monitor .col:nth-child(4) {
  width: 200px;
  text-align: center;
}
/* 通过CSS3动画滚动marquee */
.marquee-view .marquee {
  animation: move 5s linear infinite;
}
@keyframes move {
  0% {
  }
  100% {
    transform: translateY(-30%);
  }
}
/* 3.鼠标经过marquee 就停止动画 */
.marquee-view .marquee:hover {
  animation-play-state: paused;
}
</style>
